import { useNavigate } from "react-router-dom";
import "./index.css";
function Navigation() {
  const navigate = useNavigate();
  const navigation = [
    {
      name: "主页",
      path: "/homepage",
    },
    {
      name: "文章",
      path: "/article",
    },
    {
      name: "日志",
      path: "/log",
    },
    {
      name: "换肤",
      path: "/changeSkin",
    },
    {
      name: "登录",
      path: "/login",
    },
  ];
  return (
    <div className="navigation">
      <div className="navigation-left">个人博客</div>
      <div className="navigation-right">
        {navigation.map((item, index) => {
          return (
            <div
              className="navigation-item"
              key={index}
              onClick={() => {
                navigate(item.path);
              }}
            >
              {item.name}
            </div>
          );
        })}
      </div>
    </div>
  );
}
export default Navigation;
